<template>
  <div class="permission-container">
    <el-tree
      ref="permissionTree"
      :data="menuData"
      show-checkbox
      node-key="menuID"
      :default-checked-keys="defaultCheckedKeys"
      :props="defaultProps"
      :default-expand-all="true"
    >
      <span class="custom-node" slot-scope="{ node, data }">
        <i :class="data.icon || 'el-icon-menu'" style="margin-right: 5px;"></i>
        {{ node.data.menuName }}
      </span>
    </el-tree>
    
    <el-button type="primary" @click="savePermissions">保存权限</el-button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'menuName'
      },
      // 示例数据 - 需要根据实际接口数据替换
      menuData: [],
      // 原始扁平数据（模拟后端返回）
      flatMenuData: [
      ],
      //默认勾选
      defaultCheckedKeys:[],
      //选中的数据 
      checkdata:[]
    }
  },
  mounted() {
    this.transformData()
  },
    model: {
      prop: "perdialogVisible",
      event: "change"
    },
  methods: {
      show(){
          this.axios({  
              method: "get",  
              url: "Auth/"+sessionStorage.getItem("addper")
          }).then(res => {  
              this.defaultCheckedKeys=res.data.data.map(item=>item.menuID)
              console.log(this.defaultCheckedKeys)
          }).catch(err => {  
              console.log(err);  
          });  
      },
    // 将扁平数据转换为树形结构
    transformData() {
      const parentMenus = this.flatMenuData.filter(item => item.parentID === 0)
      const findChildren = parent => {
        const children = this.flatMenuData.filter(
          item => item.parentID === parent.menuID
        )
        if (children.length > 0) {
          parent.children = children
          children.forEach(child => findChildren(child))
        }
      }
      parentMenus.forEach(parent => findChildren(parent))
      this.menuData = parentMenus
    },

    // 获取选中的权限 menuID 和 roleID 数组
    getCheckedNodes() {
      const allNodes = this.$refs.permissionTree.getCheckedNodes(true);
      return allNodes.map(node => {
        return {
          authID:0,
          menuID: node.menuID,
          roleID:sessionStorage.getItem("addper"),
          sort:0,
          lastTime:"2025-03-20 19:09:02.653"
        };
      });
    },

    // 保存权限
    savePermissions() {
      const selectedNodes = this.getCheckedNodes();
      console.log('选中的权限数据:', selectedNodes);
      // 这里调用实际保存接口
      //1.删除权限
     this.axios({
      method:'DELETE',
      url:'Auth?ids='+sessionStorage.getItem("addper")
     }).then(()=>{
       //添加权限
      this.axios({
                method:'POST',
                url:'Auth/'+sessionStorage.getItem("addper"),
                data:selectedNodes
              }).then((res)=>{
                console.log("yes:"+res);
              this.$message({
                type:'success',
                message:'权限修改成功'
              })
               //关闭弹窗
               this.$emit("perdialogVisible:change", false);
              }).catch((err)=>{

                console.log("no:"+err)
              })
    }).catch((err)=>{
      console.log(err);
     })    
    },
    //所有菜单
    GetMenus(){
      this.axios({
        method:"get",
        url:'GetMenus'
      }).then(res=>{
        this.menuData=res.data
        console.log("这里是所有菜单"+this.menuData)
      })
    }
  },
  created(){
      this.GetMenus();
      this.show();
  }
}
</script>

<style scoped>
.permission-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}

.custom-node {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-right: 8px;
}

.el-button {
  margin-top: 20px;
}
</style> 